<template>
    <div class="newsinfo-container">
        <h3 class="title">{{newsInfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间：{{newsInfo.addTime | dataFormat('YYYY-MM-DD')}}</span>    
            <span>点击：{{newsInfo.cilick}}次</span>    
        </p>

        <hr>

        <div class="content" v-html="newsInfo.content"></div>
        <comment-box :id=this.id></comment-box>
    </div>
</template>

<script>

import { Toast } from "mint-ui"
//导入子组件
import comment from '../subcomponents/comment.vue'

export default {
    data(){
        return {
            id:this.$route.params.id,
            newsInfo:{}
        }
    },
    created(){
        this.getNewsInfo();
    },
    methods:{
        getNewsInfo(){
            this.$http.get('/src/data/newsList.json').then(result => {
                if(result.status === 200){
                    result.body.forEach(element => {
                        // if(element.id == this.id){
                        if(element.id == "1"){
                            this.newsInfo = element;
                        }
                    });
                } else {
                    Toast("获取新闻列表失败！");
                }
            })
        }
    },
    components:{
        'comment-box':comment
    }
}
</script>

<style lang="scss">
    .newsinfo-container{
        padding:0 4px;
        .title{
            font-size: 16px;
            text-align: center;
            margin:15px 0;
            color:red;
        }
        .subtitle{
            font-size: 13px;
            color:#226aff;
            display: flex;
            justify-content: space-between;
        }
        .content{
            img{
                width:100%;
            }
        }
    }
</style>